<template>
<div>
<img :src='goods.img'>
<p>{{goods.title}}</p>
<p>{{goods.price}}</p>
<hr>
<div class="mui-numbox">
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input class="mui-input-numbox" type="number" value="1" ref="number" @change="numberchange"/>
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
<mt-button type="danger">立即购买</mt-button>
<mt-button type="primary" @click="addToShopCar">加入购物车</mt-button>
</div>
</template>
<script>
import mui from '../mui.min.js'  
export default{
	name:'goodsxiangqing',
	data(){
	return({
	goods:[],
	number:""
	})
	},
	methods:{
	numberchange(){
		this.number = this.$refs.number.value;
		console.log(this.$refs.number)
	},
	addToShopCar(){
		var goodsInfo = {
		id:this.goods.id,
		count:parseInt(this.number),
		img:this.goods.img,
		title:this.goods.title,
		price:this.goods.price,
		selected:true
		};
		this.$store.commit("addToCar",goodsInfo)
	}
	},
	created(){
	this.$http.get("http://127.0.0.1:5000/taobao").then(response =>this.goods = response.data[this.$route.params.id-1])
	},
	mounted(){
	mui(".mui-numbox").numbox(),
	this.number = this.$refs.number.value
	}
}
</script>
